<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			ol {
				list-style: none;
			}

			.swiper {
				width: 380px;
			}

			.swiper ul {
				display: flex;
			}

			button {
				width: 40px;
				height: 230px;
				font-size: 28px;
			}

			.banner {
				position: relative;
			}

			.count,
			.title {
				position: absolute;
				width: 380px;
				background: rgba(0, 0, 0, .6);
				text-align: center;
				line-height: 40px;
				color: #FFFAFA;
			}

			.title {
				top: 190px
			}

			.page {
				display: flex;
				justify-content: space-around;
				position: absolute;
				top: 160px;
				width: 380px;
			}

			.page li {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: solid 2px blue;
				background: rgba(0, 0, 0, .4);
				cursor:pointer;
			}
		</style>

	</head>
	<body>
		<div class="swiper">
			<ul>
				<li><button type="button">&lt;</button></li>
				<li class="banner">
					<div class="count"></div>
					<img src="img/1.jpg">
					<div class="title"></div>
					<ol class="page">
						<li class="list"></li>
						<li class="list"></li>
						<li class="list"></li>
						<li class="list"></li>
					</ol>
				</li>
				<li><button type="button">&gt;</button></li>
			</ul>
		</div>
		<script type="text/javascript">
			//逻辑的初始部分 
			let btns = document.querySelectorAll('button')
			let count = document.querySelector('.count')
			let img = document.querySelector('img')
			let title = document.querySelector('.title')
			let lis = document.querySelectorAll('.list')
			let imgurl = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg']
			let tits = ["我是第一张图片", "我是第二张图片", "我是第三张图片", "我是第四张图片"]
			let banner = document.querySelector('.banner')
			let num = 0
			let timeline
			changearr()
			// 按钮点击部分
			btns[0].onclick = function() {
				num--
				if (num < 0) {
					num = 3
					changearr()
				} else {
					changearr()
				}
			}
			btns[1].onclick = function() {
				num++
				if (num > 3) {
					num = 0
					changearr()
				} else {
					changearr()
				}
			}

			// 图片自动播放
			function play() {
				timeline = setInterval(function() {
					num++
					if (num > 3) {
						num = 0
						changearr()
						active()
					} else {
						changearr()
						active()
					}
				}, 1000)
			}
			play()

			// 鼠标放上去图片停播，鼠标离开图片继续播放
			banner.onmouseover = function() {
				clearInterval(timeline)
			}
			banner.onmouseout = function() {
				play()
			}
			//点击时候的分页变化
			for (let i = 0; i < imgurl.length; i++) {
				lis[i].index = i
				lis[i].onclick = function() {
					count.innerHTML = (this.index + 1) + "/" + imgurl.length
					img.src = imgurl[this.index]
					title.innerHTML = tits[this.index]

					for (let i = 0; i < imgurl.length; i++) {
						lis[i].style.background = ""
					}
					lis[this.index].style.background = "red"
				}
			}

			// 播放时候的分页变化
			function active() {
				for (let i = 0; i < imgurl.length; i++) {
					lis[i].style.background = ""
				}
				lis[num].style.background = "red"
			}



			//通用执行函数	
			function changearr() {
				count.innerHTML = (num + 1) + "/" + imgurl.length
				img.src = imgurl[num]
				title.innerHTML = tits[num]
			}
		</script>
	</body>
</html>
